<template>
    <a :href="'https://www.icourse163.org/learn/XJTU-1001756006#/learn/content?type=detail&id=1247311997&cid=1273106435'" class="card">
        <el-card :body-style="{ padding: '10px'}" shadow="hover">
            <el-row>
                <el-col :span="8">
                    <img :src="img" class="image" width="100" height="200" />
                </el-col>
                <el-col :span="14" :offset="2">
                    <h2>{{ title }}</h2>
                    <p style="font-weight: 100">{{ source }}</p>
                    <p style="font-weight: 100">{{ course }}</p>
                    <el-tag class="tag" size="large">{{ site }}</el-tag>
                    <el-tag class="tag" size="large" type="success">{{ people }}人已学</el-tag>
                </el-col>
            </el-row>
        </el-card>
    </a>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue'

const props = defineProps({
    img: String,    // 图片地址
    title: String,  // 标题
    source: String, // 来源的大学
    course: String, // 课程名
    site: String,   // 来源网站
    people: Number, // 已学人数
    url: String     // 视频地址
})
const open = () => {
    window.open(props.url)
}
const currentDate = ref(new Date())
</script>

<style scoped>
.card {
    text-align: left;
    margin: 10px;
}

.tag {
    margin-right: 5%;
}

.time {
    font-size: 12px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 100%;
    display: block;
}
</style>